<template>
	<view class="content">
		<view class="header">
			<view class="header-oo">
				<view class="header-oo-ll" @click="upimage()">
					<image :src="user.avatar" mode=""></image>
				</view>
				<view class="header-oo-rr">
					<view class="header-oo-rr-tt">
						<view class="header-oo-rr-text">
							Full Name
							<text>*</text>
						</view>
						<input class="header-oo-rr-title" type="text" v-model="user.name" placeholder="Please enter your name" />
					</view>
				</view>
			</view>
			<view class="header-import">
				<view class="header-import-tt">MUID</view>
				<input type="text" v-model="user.muid" disabled="disabled" />
			</view>
			<view class="header-import" style="margin-top: 42rpx;">
				<view class="header-import-tt">Gender</view>
				<view class="header-import-bb">
					<view class="header-import-bb-1" @click="user.sex = 1">
						<u-icon name="checkmark-circle-fill" v-if="user.sex==1" color="#ff0000" size="18"></u-icon>
						<text class="image10" v-else></text>
						<text style="padding: 0 10rpx;">Male</text>
					</view>
					<view class="header-import-bb-1" style="margin-left: 50rpx;" @click="user.sex = 2">
						<u-icon name="checkmark-circle-fill" v-if="user.sex==2" color="#ff0000" size="18"></u-icon>
						<text class="image10" v-else></text>
						<text style="padding: 0 10rpx;">Female</text>
					</view>
				</view>
			</view>
			<view class="header-import" style="margin-top: 40rpx;">
				<view class="header-import-tt">mobile</view>
				<input class="header-import-tt-ii" type="text" v-model="user.mobile" placeholder="Please enter your mobile number" />
			</view>
			<view class="header-import" style="margin-top: 20rpx;">
				<view class="header-import-tt">email</view>
				<input class="header-import-tt-ii" type="text" v-model="user.email" placeholder="Please enter your email address" />
			</view>
			<view class="header-import" style="margin-top: 20rpx;">
				<view class="header-import-tt">Facebook</view>
				<input class="header-import-tt-ii" type="text" v-model="user.facebook" placeholder="Please enter Facebook" />
			</view>
			<view class="header-import" style="margin-top: 20rpx;">
				<view class="header-import-tt">Instagram</view>
				<input class="header-import-tt-ii" type="text" v-model="user.Instagram" placeholder="Please enter Instagram" />
			</view>
		</view>
		<view class="header-bb">
			<view class="header-bb-tt">Select design</view>
			<view class="header-content">
				<view class="header-content-tt">
					<view class="" style="position: relative;">
						<image :src="user.avatar" mode=""></image>
						<view class="header-content-tt-ssss">
							<image src="/static/card/nan.png" v-if="user.sex==1" mode=""></image>
							<image src="/static/card/nv.png" v-else mode=""></image>
						</view>
					</view>
					<view class="header-content-tt-bb">
						<view>{{user.name}}</view>
					</view>
				</view>
				<view class="header-content-layout">
					<view class="">
						<view class="header-content-cc">
							<image style="width: 32rpx;" src="/static/card/people.png" mode="widthFix"></image>
							<text>{{user.muid}}</text>
						</view>
						<view class="header-content-cc">
							<image style="width: 36rpx;" src="/static//card/mail.png" mode="widthFix"></image>
							<text>{{user.email}}</text>
						</view>
						<view class="header-content-cc">
							<image style="width: 36rpx;" src="/static/card/facebook.png" mode="widthFix"></image>
							<text>{{user.facebook}}</text>
						</view>
						<view class="header-content-cc">
							<image style="width: 36rpx;" src="/static/telbook/list-icon4.png" mode="widthFix"></image>
							<text>{{user.Instagram}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="header-bb-bottun" @click="gobay()">SUBMIT</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					muid: '',
					avatar: '',
					name: '',
					sex: 1,
					email: '',
					facebook: '',
					lnstagram: '',
					mobile:''
				},
				isshow: ''
			}
		},
		onLoad(e) {
			if (e.isshow) {
				console.log(1)
				this.isshow = 1
				this.init2()
			} else {
				console.log(2)
				this.isshow = 2
				this.init()
			}

		},
		methods: {
			upimage() {
				let app = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let img = res.tempFilePaths[0]
						console.log(img, 665555555)
						uni.uploadFile({
							url: 'https://dongya.hualin688.com/applet.php', //仅为示例，非真实的接口地址
							filePath: img,
							name: 'image',
							formData: {
								'map': 'applet_img_upload',
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let ress = JSON.parse(uploadFileRes.data)
								app.user.avatar = 'https://dongya.hualin688.com' + ress.data.path

							}
						});
					}
				});
			},
			gobay() {
				let params = {
					map: 'applet_business_card_save',
					name: this.user.name,
					avatar: this.user.avatar,
					mobile: this.user.mobile,
					facebook:this.user.facebook,
					email:this.user.email,
					lnstagram:this.user.Instagram,
					type:'3',
					gender:this.user.sex
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						uni.showToast({
							title:res.data.data.msg,
							icon:'none'
						})
						if(this.isshow == 1){
							uni.navigateBack({
								delta:2
							})
						}else{
							uni.navigateBack({
								delta:1
							})
						}
						
					} else {
				
					}
				})
			},
			init2() {
				const params = {
					map: 'applet_member_center_cfg'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.user.avatar = res.data.data.avatar
						this.user.muid = res.data.data.muid
						console.log(res.data.data)
					} else {

					}
				})
			},
			init() {
				const params = {
					map: 'applet_business_card_detail'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.user.name = res.data.data.name
						this.user.sex = res.data.data.gender
						this.user.avatar = res.data.data.avatar
						this.user.muid = res.data.data.show_id
						this.user.email = res.data.data.email
						this.user.Instagram = res.data.data.address
						this.user.facebook = res.data.data.mobile
						console.log(res.data.data)
					} else {

					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	view,
	text {
		box-sizing: border-box;
	}

	.content {
		background-color: #F4F5F6;
	}

	.header {
		width: 100%;
		padding: 31rpx 22rpx;
		background-color: #FFFFFF;
	}

	.header-oo {
		display: flex;
		justify-content: flex-start;
	}

	.header-oo-ll {
		margin-right: 51rpx;
	}

	.header-oo-ll image {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		background-color: #007AFF;
	}

	.header-oo-ll view {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
		line-height: 36rpx;
	}

	.header-oo-rr {
		margin-top: 10rpx;
	}

	.header-oo-rr-tt {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.header-oo-rr-text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		margin-right: 29rpx;
	}

	.header-oo-rr-text text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4E31;
		line-height: 36rpx;
	}

	.header-oo-rr-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
		line-height: 36rpx;
	}

	.header-oo-rr-bb {
		margin-top: 32rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.header-oo-rr-bb image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 147rpx;
	}

	.header-oo-rr-bb text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
		line-height: 36rpx;
	}

	.header-import {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.header-import-tt {
		width: 174rpx;
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.header-import input {
		width: 522rpx;
		height: 74rpx;
		padding-left: 21rpx;
		background: #F4F5F6;
		border-radius: 10rpx;
	}

	.header-import-tt text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4E31;
		line-height: 36rpx;
	}

	.header-import-tt-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 44rpx;

	}

	.header-import-tt-img image {
		width: 26rpx;
		height: 29rpx;
		margin-left: 10rpx;
	}

	.header-import-tt-img text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 17rpx;
	}

	.header-import .header-import-tt-ii {
		width: 522rpx;
		height: 74rpx;
		font-size: 30rpx;
		padding-left: 21rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.header-import-bb {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.header-import-bb-1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.header-import-bb-1 .image10 {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #6F6F6F;
		background-color: #FFFFFF;
	}

	.header-import-bb-1 .image11 {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		/* border: 1rpx solid #6F6F6F; */
		background-color: #3CC9FE;
	}

	.header-import-bb-1 .header-import-bb-1-22 {
		width: 26rpx;
		height: 29rpx;
		margin-left: 10rpx;
	}

	.header-bb {
		margin-top: 17rpx;
		padding: 34rpx 30rpx;
		background-color: #FFFFFF;
	}

	.header-bb-tt {
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.header-content {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 30rpx 40rpx;
		border-radius: 30rpx;
		background-color: #3CC9FE;
		position: relative;
		z-index: 100;
		background: url('https://dongya.hualin688.com/public/wxapp/businesscard/img/default_bg_5.png');
		background-size: 100%;
	}



	.header-content-tt {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.header-content-tt image {
		width: 120rpx;
		height: 120rpx;
		display: block;
		border-radius: 50%;
		border: 4rpx solid #FFFFFF;
		background-color: #007AFF;
		margin-right: 17rpx;
	}

	.header-content-tt-ssss {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		position: absolute;
		right: 20rpx;
		bottom: 15rpx;
		text-align: center;
	}

	.header-content-tt-ssss image {
		width: 19rpx;
		height: 20rpx;
		margin-left: 5rpx;
		margin-top: 2rpx;
		background-color: #FFFFFF;
	}

	.header-content-tt-bb view:nth-of-type(1) {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.header-content-tt-bb view:nth-of-type(2) {
		width: 253rpx;
		height: 42rpx;
		background: #FEFEFE;
		border-radius: 21px;
		margin-top: 17rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header-content-tt-bb view:nth-of-type(2) image {
		width: 27rpx;
		height: 26rpx;
		background-color: #03ff0b;
	}

	.header-content-tt-bb view:nth-of-type(2) text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		/* font-style: italic; */
		color: #3CC9FE;
		line-height: 13rpx;
	}

	.header-content-cc {
		margin-top: 26rpx;
		display: flex;
		align-items: center;
		margin-left: 10rpx;
	}

	.header-content-cc text {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		/* font-style: italic; */
		color: #FFFFFF;
		line-height: 13rpx;
		margin-left: 20rpx;
	}

	.header-content-layout {
		display: flex;
		align-items: flex-end;
	}

	.header-bb-bottun {
		width: 570rpx;
		height: 98rpx;
		margin: 0 auto;
		background: #3CC9FE;
		border-radius: 49rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 13rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 75rpx;
		margin-bottom: 74rpx;
	}
</style>
